<template>
  <div class="table-main">
    <el-table
      ref="multipleTable"
      :data="displayTableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center"> </el-table-column>
      <el-table-column type="index" label="序号" width="80" align="center">
        <template #default="{ $index }">
          {{ (secrchForm.pageNum - 1) * secrchForm.pageSize + $index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" min-width="120" align="center">
        <template #default="{ row }">
          <!-- 新增行显示输入框 -->
          <el-input 
            v-if="row.isNew" 
            v-model="row.name" 
            placeholder="请输入用户姓名"
            style="width: 100%;"
          />
          <!-- 编辑行显示输入框 -->
          <el-input 
            v-else-if="editingRowId === row.id" 
            v-model="editingName" 
            placeholder="请输入用户姓名"
            style="width: 100%;"
          />
          <!-- 普通行显示文本 -->
          <span v-else @dblclick="startEdit(row)" style="cursor: pointer;">{{ row.name || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="loginName" label="账号" min-width="120" align="center">
        <template #default="{ row }">
          <span>{{ row.loginName || '-' }}</span>
        </template>
      </el-table-column>

      <!-- 角色列 -->
      <el-table-column prop="roles" label="角色" min-width="120" align="center">
        <template #default="{ row }">
          <!-- 新增行显示角色选择框 -->
          <el-select 
            v-if="row.isNew" 
            v-model="row.roleIds" 
            placeholder="请选择角色"
            style="width: 100%;"
          >
            <el-option
              v-for="role in rolesList"
              :key="role.id"
              :label="role.name"
              :value="role.id"
            />
          </el-select>
          <!-- 编辑行显示角色选择框 -->
          <el-select 
            v-else-if="editingRowId === row.id" 
            v-model="editingRoleIds" 
            placeholder="请选择角色"
            style="width: 100%;"
          >
            <el-option
              v-for="role in rolesList"
              :key="role.id"
              :label="role.name"
              :value="role.id"
            />
          </el-select>
          <!-- 普通行显示角色名称 -->
          <span v-else>{{ getRolesText(row.roles) }}</span>
        </template>
      </el-table-column>
   
      <el-table-column label="操作" width="300" align="center">
        <template #default="{ row }">
          <!-- 新增行显示确定和取消按钮 -->
          <div v-if="row.isNew" class="table-buttons">
            <el-link type="primary" :underline="false" @click="saveNewRow">
              <el-icon><Check /></el-icon> 确定
            </el-link>
            <el-link type="primary" :underline="false" @click="cancelNewRow">
              <el-icon><Close /></el-icon> 取消
            </el-link>
          </div>
          <!-- 编辑行显示确定和取消按钮 -->
          <div v-else-if="editingRowId === row.id" class="table-buttons">
            <el-link type="primary" :underline="false" @click="saveEdit">
              <el-icon><Check /></el-icon> 修改
            </el-link>
            <el-link type="primary" :underline="false" @click="cancelEdit">
              <el-icon><Close /></el-icon> 取消
            </el-link>
          </div>
          <!-- 普通行显示编辑和删除按钮 -->
          <div v-else class="table-buttons">
            <el-link type="primary" :underline="false" @click="startEdit(row)">编辑</el-link>
            <el-link type="primary" :underline="false" @click="openRemoveDialog(row, 3)">重置密码</el-link>
            <el-link type="primary" :underline="false" @click="openRemoveDialog(row, 1)">删除</el-link>
          </div>
        </template>
      </el-table-column>
    </el-table>
    
    <!-- 分页组件 -->
    <page
      class="place-self-end"
      :options="secrchForm"
      :change="handleCurrentChange"
      :handleSizeChange="handleSizeChange"
    ></page>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue';
import { userApi } from '@/api/user.js';
import { Delmessage } from '@/utils/message.js';
import { ElMessage } from 'element-plus';
import { Check, Close } from '@element-plus/icons-vue';
import Page from '@/components/page/index.vue';
import { useUser } from '@/store/useUser.js';

// 获取当前用户信息
const currentUser = useUser();

// 显示当前用户信息（用于调试）
const showCurrentUserInfo = () => {
  console.log('当前登录用户信息:', currentUser.getUserInfo);
  console.log('用户ID:', currentUser.getUserId);
  console.log('用户名:', currentUser.getUserName);
  console.log('登录名:', currentUser.getLoginName);
  console.log('部门ID:', currentUser.getDepartmentId);
  console.log('用户角色:', currentUser.getUserRoles);
  console.log('Token:', currentUser.getToken);
  console.log('是否已登录:', currentUser.isLoggedIn);
};

// 定义 props 和 emits
const emit = defineEmits(['viewInfo', 'refreshTable']);

// 响应式数据
const tableData = ref([]);
const multipleSelection = ref([]);
const secrchForm = reactive({
  pageNum: 1,
  pageSize: 10,
  name: '',
  departmentId: 1,
  total: 0
});

// 新增行相关
const isAddingNewRow = ref(false);
const newRowData = ref({
  departmentId: 1,
  name: '',
  isNew: true,
  roleIds: [] // 新增行时初始化为空数组
});
const editingRowId = ref(null);
const editingName = ref('');
const editingRoleIds = ref([]); // 编辑时的角色ID数组

// 角色列表
const rolesList = ref([]);

// 计算显示的表格数据，新增行会显示在最顶部
const displayTableData = computed(() => {
  if (isAddingNewRow.value) {
    return [newRowData.value, ...tableData.value];
  }
  return tableData.value;
});

// 获取表格数据
const getTableData = async () => {
  try {
    console.log('发送给后端的搜索参数:', secrchForm);
    const [err, res] = await userApi.getUserList(secrchForm);
    if (err) return;
    
    console.log('后端返回的数据:', res);
    
    // 确保每个用户数据都有必要的字段
    tableData.value = (res.data.records || []).map(user => ({
      ...user,
      name: user.name || user.realName || '-',
      loginName: user.loginName || user.account || '-',
      roleIds: user.roles ? user.roles.map(role => role.id) : (Array.isArray(user.roleIds) ? user.roleIds : [user.roleIds].filter(Boolean)) // 确保是数组格式
    }));
    secrchForm.total = res.data.total;
  } catch (error) {
    console.error('获取用户列表失败:', error);
    secrchForm.total = 0;
    tableData.value = [];
  }
};

// 获取角色列表
const getRolesList = async () => {
  try {
    const [err, res] = await userApi.getRolesList();
    if (err) return;
    
    rolesList.value = res.data || [];
  } catch (error) {
    console.error('获取角色列表失败:', error);
  }
};

// 获取角色文本显示
const getRolesText = (roles) => {
  if (!roles || !Array.isArray(roles)) return '-';
  
  // 如果 roles 是对象数组（包含 id 和 name）
  if (roles.length > 0 && typeof roles[0] === 'object' && roles[0].name) {
    return roles.map(role => role.name).join(', ');
  }
  
  // 如果 roles 是 ID 数组，则从 rolesList 中查找名称
  const roleNames = roles.map(roleId => {
    const role = rolesList.value.find(r => r.id === roleId);
    return role ? role.name : roleId;
  });
  
  return roleNames.length > 0 ? roleNames.join(', ') : '-';
};

// 选择变化
const handleSelectionChange = (val) => {
  multipleSelection.value = val;
  const removeIds = val.map(item => item.id);
  emit('selectionChange', removeIds);
};

// 每页显示个数切换
const handleSizeChange = (value) => {
  secrchForm.pageSize = value;
  secrchForm.pageNum = 1;
  getTableData();
};

// 页码切换
const handleCurrentChange = (value) => {
  secrchForm.pageNum = value;
  getTableData();
};

// 查看/编辑用户信息
const viewInfo = async (info, title) => {
  try {
    const [err, res] = await userApi.getUserInfo(info.id);
    if (err) return;
    
    emit('viewInfo', { title, userInfo: res.data });
  } catch (error) {
    console.error('获取用户信息失败:', error);
    ElMessage.error('获取用户信息失败');
  }
};

// 删除用户或重置密码
const openRemoveDialog = (info, removeDialogType) => {
  if (removeDialogType === 1) {
    // 删除用户
    deleteUser(info);
  } else if (removeDialogType === 3) {
    // 重置密码
    resetPassword(info);
  }
};

// 删除用户方法
const deleteUser = (userInfo) => {
  const closeDialog = Delmessage({
    title: "删除确认",
    content: `确定要删除用户"${userInfo.name}"吗？`,
    submitText: "删除",
    cancel: function() {
      console.log('取消删除用户');
      closeDialog(); // 关闭弹窗
    },
    submit: async function() {
      try {
        const [err, res] = await userApi.deleteUser(userInfo.id);
        if (err) return;
        
        ElMessage.success('删除成功');
        getTableData();
        emit('refreshTable');
        closeDialog(); // 成功后关闭弹窗
      } catch (error) {
        console.error('删除用户失败:', error);
        ElMessage.error('删除失败');
      }
    }
  });
};

// 重置密码方法
const resetPassword = (userInfo) => {
  const closeDialog = Delmessage({
    title: "重置密码确认",
    content: `确定要重置用户"${userInfo.name}"的密码吗？`,
    submitText: "重置",
    cancel: function() {
      console.log('取消重置密码');
      closeDialog(); // 关闭弹窗
    },
    submit: async function() {
      try {
        const [err, res] = await userApi.resetPassword(userInfo.id);
        if (err) return;
        
        ElMessage.success('密码重置成功');
        closeDialog(); // 成功后关闭弹窗
      } catch (error) {
        console.error('重置密码失败:', error);
        ElMessage.error('密码重置失败');
      }
    }
  });
};

// 搜索方法
const handleSearch = (keyWorld) => {
  console.log(keyWorld);
  secrchForm.pageNum = 1;
  secrchForm.pageSize = 10;
  secrchForm.name = keyWorld;
  getTableData();
};

// 新增行方法
const addNewRow = () => {
  isAddingNewRow.value = true;
  newRowData.value = {
    departmentId: 1,
    name: '',
    isNew: true,
    roleIds: [] // 新增行时初始化为空数组
  };
  editingRowId.value = null; // 确保没有正在编辑的行
};

// 保存新增行方法
const saveNewRow = async () => {
  if (!newRowData.value.name) {
    ElMessage.error('姓名不能为空');
    return;
  }

  // 校验角色必选
  if (!newRowData.value.roleIds || 
      (Array.isArray(newRowData.value.roleIds) && newRowData.value.roleIds.length === 0) ||
      (typeof newRowData.value.roleIds === 'string' && !newRowData.value.roleIds.trim())) {
    ElMessage.error('请选择用户角色');
    return;
  }

  try {
    // 先获取用户姓名的拼音作为 loginName
    const [pinyinErr, pinyinRes] = await userApi.getUserPinyin(newRowData.value.name);
    if (pinyinErr) {
      ElMessage.error('获取用户拼音失败');
      return;
    }

    // 使用拼音作为 loginName
    const userData = {
      name: newRowData.value.name,
      loginName: pinyinRes.data,
      departmentId: newRowData.value.departmentId,
      roleIds: Array.isArray(newRowData.value.roleIds) ? newRowData.value.roleIds : [newRowData.value.roleIds].filter(Boolean) // 确保是数组格式
    };

    // 调用新增用户接口
    const [err, res] = await userApi.addUser(userData);
    if (err) return;

    ElMessage.success('新增成功');
    
    // 重置新增行状态
    isAddingNewRow.value = false;
    newRowData.value = {
      departmentId: 1,
      name: '',
      isNew: true,
      roleIds: '' // 重置新增行时 roleIds
    };
    
    // 重新获取表格数据
    getTableData();
    emit('refreshTable');
  } catch (error) {
    console.error('新增失败:', error);
    ElMessage.error('新增失败');
  }
};

// 取消新增行方法
const cancelNewRow = () => {
  isAddingNewRow.value = false;
  newRowData.value = {
    departmentId: 1,
    name: '',
    isNew: true,
    roleIds: '' // 取消新增行时 roleIds
  };
  editingRowId.value = null; // 确保没有正在编辑的行
};

// 开始编辑方法
const startEdit = (row) => {
  editingRowId.value = row.id;
  editingName.value = row.name;
  
  // 获取当前用户的角色ID（单选，取第一个）
  let currentRoleId = '';
  
  // 如果后端返回的是角色对象数组，提取第一个ID
  if (row.roles && Array.isArray(row.roles) && row.roles.length > 0) {
    if (typeof row.roles[0] === 'object' && row.roles[0].id) {
      currentRoleId = row.roles[0].id;
    } else {
      currentRoleId = row.roles[0];
    }
  } 
  // 如果后端返回的是角色ID数组，取第一个
  else if (row.roleIds && Array.isArray(row.roleIds) && row.roleIds.length > 0) {
    currentRoleId = row.roleIds[0];
  }
  // 如果后端返回的是单个角色ID字符串
  else if (row.roleIds && typeof row.roleIds === 'string') {
    currentRoleId = row.roleIds;
  }
  
  editingRoleIds.value = currentRoleId;
  console.log('编辑用户角色:', row.name, '当前角色ID:', currentRoleId);
};

// 保存编辑方法
const saveEdit = async () => {
  if (!editingName.value) {
    ElMessage.error('姓名不能为空');
    return;
  }

  // 校验角色必选
  if (!editingRoleIds.value || 
      (Array.isArray(editingRoleIds.value) && editingRoleIds.value.length === 0) ||
      (typeof editingRoleIds.value === 'string' && !editingRoleIds.value.trim())) {
    ElMessage.error('请选择用户角色');
    return;
  }

  try {
    const [err, res] = await userApi.updateUser({
      id: editingRowId.value, 
      name: editingName.value,
      roleIds: editingRoleIds.value ? [editingRoleIds.value] : [] // 转换为数组格式
    });
    if (err) return;
    
    ElMessage.success('编辑成功');
    getTableData();
    editingRowId.value = null;
    editingName.value = '';
    editingRoleIds.value = ''; // 编辑成功后重置角色选择
    emit('refreshTable');
  } catch (error) {
    console.error('编辑失败:', error);
    ElMessage.error('编辑失败');
  }
};

// 取消编辑方法
const cancelEdit = () => {
  editingRowId.value = null;
  editingName.value = '';
  editingRoleIds.value = ''; // 取消编辑时重置角色选择
};

// 暴露方法给父组件
defineExpose({
  getTableData,
  handleSearch,
  addNewRow,
  saveNewRow,
  cancelNewRow,
  saveEdit,
  cancelEdit,
  getRolesList
});

onMounted(() => {
  getTableData();
  getRolesList(); // 在组件挂载时获取角色列表
  showCurrentUserInfo(); // 显示当前用户信息（调试用）
});
</script>

<style lang="scss" scoped>
.table-main {
  display: flex;
  flex-direction: column;
  height: 100%;

  .table-buttons {
    display: flex;
    justify-content: center;
    gap: 8px;
  }

  .status-active {
    color: #67c23a;
  }

  .status-inactive {
    color: #f56c6c;
  }
}
</style>